<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>商品展示区</title>
	<link rel="stylesheet" type="text/css" href="Resources/css/content.css">
	<link rel="stylesheet" type="text/css" href="Resources/layui/css/layui.css">
	<script type="text/javascript" src="Resources/layui/layui.js"></script>
</head>
<body>
		<div class="content">
			<!--分割区-->
			<div style="background:#f8f8f8;height:5px"></div>
			<!-- 轮播区 -->
			<div class="lunbo" align="center">
				<!--背景区-->
				<div class="category-banner">
					<div class="w1300">
						<div class="layui-carousel" id="test10">
							<div carousel-item="">
								<img src="Resources/images/lunbo_img/cat1_1.jpg"> 
								<img src="Resources/images/lunbo_img/cat1_2.jpg"> 
								<img src="Resources/images/lunbo_img/dog1_1.jpg"> 
								<img src="Resources/images/lunbo_img/pets1_1.jpg">
								<img src="Resources/images/lunbo_img/pets1_2.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--商品展示-->
			<table width="80%" border="0" class="show" style="margin:auto;">
			</table>

			<div class="product-list-box" id="product-list-box">
				<div class="product-list-cont w1200">
					<h4>全部商品</h4>
					<div class="product-item-box layui-clear">
						<c:forEach items="${products}" var="Good" varStatus="st">
							<div class="list-item">
								<a href="listProduct?status=select&gid=${Good.gid}">
									<img src="${Good.gsrc }" height="160px" width="210px">
								</a>
								<p style="text-align: center;">${Good.gName}</p>
								<span>￥${Good.gPrice }</span>
							</div>
						</c:forEach>
						
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		layui.use(['carousel', 'form'], function() {
			var carousel = layui.carousel,
				form = layui.form;

			//图片轮播
			carousel.render({
				elem: '#test10',
				width: '80%',
				height: '550px',
				interval: 5000
			});

			var $ = layui.$,
				active = {
					set: function(othis) {
						var THIS = 'layui-bg-normal',
							key = othis.data('key'),
							options = {};

						othis.css('background-color', '#5FB878').siblings().removeAttr('style');
						options[key] = othis.data('value');
						ins3.reload(options);
					}
				};

			//监听开关
			form.on('switch(autoplay)', function() {
				ins3.reload({
					autoplay: this.checked
				});
			});

			$('.demoSet').on('keyup', function() {
				var value = this.value,
					options = {};
				if(!/^\d+$/.test(value)) return;

				options[this.name] = value;
				ins3.reload(options);
			});

			//其它示例
			$('.demoTest .layui-btn').on('click', function() {
				var othis = $(this),
					type = othis.data('type');
				active[type] ? active[type].call(this, othis) : '';
			});
		});

		//标题闪烁
		function changeColor1() {
			var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
			color = color.split("|");
			document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
		}
		setInterval("changeColor1()", 200);

		//时间判断
		window.onload = function() {
			window.requestAnimationFrame(getDate)
		}

		function getDate() {
			window.setTimeout(function() {
				window.requestAnimationFrame(getDate)
			}, 1000 / 2)
			var d = new Date();
			var year = d.getFullYear() //获取年
			var month = d.getMonth() + 1; //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
			var day = d.getDay() //获取日
			var days = d.getDate() //获取日期
			var hour = d.getHours() //获取小时
			var minute = d.getMinutes() //获取分钟
			var second = d.getSeconds() //获取秒

			if(month < 10) month = "0" + month
			if(days < 10) days = "0" + days
			if(hour < 10) hour = "0" + hour
			if(minute < 10) minute = "0" + minute
			if(second < 10) second = "0" + second

			var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
			var Tools = document.getElementById("date")
			var da = "今天是<br/>" + year + "年" + month + "月" + days + "日" + "<br/>" + hour + ":" + minute + ":" + second + "<br/>" + week[day]
			Tools.innerHTML = da
		}
	</script>

</html>